<template>
  <div class="setting">
    <van-nav-bar
      title="设置"
      safe-area-inset-top
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="list">
      <div class="content" @click="clearStorge">
        <div>数据缓存</div>
        <div>{{ `>` }}</div>
      </div>
      <div class="content" @click="getuserrule">
        <div>用户协议</div>
        <div>{{ `>` }}</div>
      </div>
      <div class="content" @click="getprivacy">
        <div>隐私政策</div>
        <div>{{ `>` }}</div>
      </div>
      <button class="loginout" @click="outlogin">{{name}}</button>
    </div>
  </div>
</template>
<script>
import { Dialog, Toast } from "vant";
import { reactive,toRefs } from "vue";
export default {
  name:'MineSetting',
  setup() {
    const data = reactive({
      name: localStorage.getItem("usedata")
        ? "退出登录"
        : "尚未登录.现在去",
    }); 
    return {  ...toRefs(data)};
  },
  methods: {
    outlogin() {
      let userinfo = localStorage.getItem("usedata");
      if (userinfo) {
        localStorage.removeItem("token");
        localStorage.removeItem("usedata");
        Toast("退出成功");
        this.$router.push("/mine");
      } else {
        this.$router.push("/login");
      }
    },
    //点击回退按钮
    onClickLeft() {
      this.$router.go(-1);
    },
    //点击数据缓存
    clearStorge() {
      Dialog.confirm({
        cancelButtonText: "我点错了",
        confirmButtonColor: "#ff8306",
        message: "确定要清除缓存吗？",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    //点击用户协议
    getuserrule() {
      this.$router.push("/mine/setting/userrule");
      console.log(1);
    },
    //点击查看隐私政策
    getprivacy() {
      this.$router.push("/mine/setting/privacy");
    },
  },
};
</script>

<style lang="scss" scoped>
.setting {
  font-size: 15px;
  width: 100%;
  .list {
    // color:#aaa;
    width: 90%;
    margin: 0 auto;
    margin-top: 35px;
    .content {
      display: flex;
      justify-content: space-between;
      margin: 30px 0;
      div + div {
        color: #aaa;
      }
    }
    .loginout {
      font-size: 14px;
      width: 85%;
      margin-left: 7.5%;
      margin-top: 170px;
      border-radius: 10px;
      color: #fff;
      padding: 8px 0;
      border: 1px solid #ff8306;
      background-color: #ff8306;
    }
  }
}
</style>